<template>
	<view>
		<view class="content">
			<view class="applicationlist">
				<view class="input-item"  v-if="inType=='reset'">
					<text class="tit">手机号码</text>
					<input type="number" :value="phone" placeholder="请输入手机号码" maxlength="11" data-key="phone" @input="inputChange" />
				</view>
				<view class="input-item" style="margin-bottom:20px;position: relative;"  v-if="inType=='reset'">
					<text class="tit">验证码</text>
					<input :value="code" type="text" placeholder="请输入验证码" placeholder-class="input-empty" maxlength="20"
					 data-key="code" @input="inputChange" />
					<button type="default" @click="sendValide" class="securitycode">发送验证码</button>
				</view>
				<view class="input-item">
					<text class="tit">{{pageTitle}}</text>
					<input type="password" data-key="password" placeholder="请输入支付密码" :value="password"  @input="inputChange" />
				</view>
				<view class="application" style="margin-top: 30px;" @click="commit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import numberKeyboard from '@/components/number-keyboard/number-keyboard.vue'
	import passwordInput from '@/components/password-input/password-input.vue'
	import {
		sendValidaCode
	} from '@/common/loadUserInfo.js'
	export default {
		components: {
			numberKeyboard,
			passwordInput
		},
		data() {
			return {
				mobile:'',
				password: '',
				pageTitle: '',
				shoouldCommit: true,
				inType: '',
				phone: '',
				allow: true,
				code: ''
			};
		},
		created() {
			
		},
		onLoad(options) {
			if (options.type) {
				let type = options.type
				this.inType = type
				let title = ''
				if (type == 'enter') {
					title = "输入密码"
					this.pageTitle = '请输入密码'
				} else if(type == 'reset'){
					title = '设置支付密码'
					this.pageTitle = '设置支付密码'
				}else{
					title = '设置密码'
					this.pageTitle = '设置密码'
				}
				uni.setNavigationBarTitle({
					title
				})
			}

		},
		methods: {
			//发送验证码
			sendValide() {
				let phoneReg = /^1[3456789]\d{9}$/
				console.log(this.phone)
				if (!phoneReg.test(this.phone)) {
					this.$api.msg('手机号码输入错误！')
					return
				}
				let that = this
				sendValidaCode({
					data: {
						phone: that.phone
					},
					success: (res) => {
						that.$api.msg('验证码发送成功！')
					}

				})
			},
			// 表单验证stpOne
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			commit() {
				if (this.inType == 'reset') {
					let that = this
					that.$Request.request('/api/user_center/resetPayPwd', 'POST', {
						code: that.code,
						payPwd: that.password
					}).then(res => {
						if (res.status == 1) {
							that.$api.msg('密码设置成功')
							uni.setStorageSync('mykey',this.password)
							setTimeout(()=>{
								uni.navigateBack()
							},800)
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			KeyboarOpen() {
				this.$refs.KeyboarHid.open()
			},
			keyBordInput(val) {
				this.password = val
				if (val.length == 6) {
					this.shoouldCommit = true
					this.$refs.KeyboarHid.close()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.securitycode {
			position: absolute;
			right: 40upx;
			width: 180upx;
			height: 50upx;
			line-height: 50upx;
			font-size: 24upx;
			background-color: #ff8e32 !important;
			bottom: 5px;
			color: #fff !important;
			z-index: 99;
		}
	
		.application {
			font-size: 14px;
			margin: 0 auto;
			width: 65%;
			background-color: #ff6600;
			color: #fff;
			text-align: center;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
		}
	
		.applicationlist {
			padding: 10px;
		}
	
		.input-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30upx;
			background: $page-color-light;
			height: 120upx;
			border-radius: 4px;
			margin-bottom: 50upx;
	
			&:last-child {
				margin-bottom: 0;
			}
	
			.tit {
				height: 50upx;
				line-height: 56upx;
				font-size: $font-sm+2upx;
				color: $font-color-base;
			}
	
			input {
				height: 60upx;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				width: 100%;
			}
		}
	}
	
	.bindmobile {
		width: 75%;
		// position: absolute;
		// transform: translateY(-40%);
		// transform: translateX(-50%);
		// top: 50%;
		// left: 50%;
	}
	
	.modal {
		background: black;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		opacity: 0.4;
	}
	
	.info {
		position: absolute;
		background-color: white;
		width: 80%;
		left: 50%;
		top: 41%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		font-size: 15px;
		border-radius: 10px;
		padding-bottom: 10px;
	
		.info-title {
			text-align: center;
			padding: 15px 10px;
			border-bottom: 1px solid #f2f2f2;
			position: relative;
	
			.info-icon {
				font-size: 17px;
				position: absolute;
				right: 5%;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	
		.uni-form-item {
			display: flex;
			align-items: center;
			padding: 15px 10px;
		}
	
		.confirm {
			color: #007aff;
			text-align: center;
			padding: 10px 0px;
			border-top: 1px solid #f2f2f2;
		}
	
	}
	.item {
		padding: 40rpx;
	}

	.title {
		margin-bottom: 30rpx;
	}

	.bottombtn {
		margin: 150rpx auto 0 auto;
		background-color: $themColor;
		width: 660rpx;
		border-radius: 100rpx;
		color: #fff;
		letter-spacing: 1em;
	}

	.inputRow {
		padding: 30rpx 46rpx;
		@extend %flexBetw;
		font-size: 26rpx;

		.invokeLable {
			width: 150rpx;
		}

		.invokeInput {
			width: 500rpx;
			height: 50rpx;
			background-color: #f8f8f8;
			border-radius: 8rpx;
			@extend %flexVcenter;
		}

		.inputContain {
			width: 400rpx;
			height: 50rpx;
			background-color: #f8f8f8;
			border-radius: 8rpx;
			@extend %flexVcenter;
		}

		.sendcode {
			background-color: #f8f8f8;
			padding: 10rpx 10rpx;
		}

		.countDown {
			width: 180rpx;
			text-align: center;
			font-size: 22rpx;


		}


	}
</style>
